<template>
  <div id="app">
    <transition :name="transitionName" appear tag="section">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  title: '',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      // 翻页动画
      transitionName: '',
      // 页面缓存
      isRouterAlive: true
    }
  },
  methods: {
    // 组件刷新
    reload () {
      let vue = this
      vue.isRouterAlive = false
      // 在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
      vue.$nextTick(() => {
        vue.isRouterAlive = true
      })
    }
  },
  watch: {
    $route (to, from) {
      const vue = this
      // 页面切换动画
      if (to.meta.index > from.meta.index) {
        vue.transitionName = 'slide-left'
      } else {
        vue.transitionName = 'slide-right'
      }
    }
  }
}
</script>

<style></style>
